<template>
  <div id="tradeOrder">
    <div class="topBox">
      <NavBar title="高手榜单" />
      <div class="tabBox">
        <div
          :class="tabActive == index ? 'active' : ''"
          v-for="(item, index) in tab"
          :key="index"
          @click="clickTab(index)"
        >
          {{ item }}
        </div>
      </div>
      <tabs class="tabBox" v-model="active" @change='changeTab'>
        <tab :title="item" v-for="item in tabItem" :key="item" :text="item" />
      </tabs>
    </div>
    <div class="dataBox">
      <div class="data" v-for="item in 7" :key="item" @click="to('/tradeOrderDetail')">
        <div class="imgBox">
          <img
            src="https://kmapi.flash688.com/picHead/2021080210521935092.jpg"
          />
          <div class="level">Lv4</div>
        </div>
        <div class="name">hC853n</div>
        <div class="top">TOP1</div>
        <div class="tags">
          <div class="tag">
            <img src="../../assets/images/profit.png" alt="" />
            <div>13.00%</div>
          </div>
          <div class="tag">
            <img src="../../assets/images/accuracy.png" alt="" />
            <div>22.00%</div>
          </div>
          <div class="tag">
            <img src="../../assets/images/follow.png" alt="" />
            <div>33</div>
          </div>
        </div>
        <div class="follow">跟随</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant'

import NavBar from '@/components/navbar'
export default {
  components: {
    Tab,
    Tabs,
    NavBar
  },
  data() {
    return {
      tab: ['极速', '合约'],
      tabItem: ['收益高手', '常胜高手', '人气高手'],
      tabActive: 0, //模式 0极速 1合约
      active: 0 //xx高手
    }
  },
  methods: {
    // 点击极速、合约
    clickTab(index) {
      this.tabActive = index
    },
    // xx高手change
    changeTab(){
      console.log( this.tabActive,this.active)
    },
    to(to){
      this.$router.push({path:to})
    }
  }
}
</script>

<style lang="less" scoped>
#tradeOrder {
  background-color: #f5f5f5;
  min-height: 100vh;
  .topBox {
    position: fixed;
    z-index: 99;
    background: #fff;
    font-size: 15px;
    color: #303133;
    .tabBox {
      display: flex;
      div {
        width: 50%;
        text-align: center;
        line-height: 40px;
      }
      .active {
        font-weight: 700;
        color: #2979ff;
      }
    }
    /deep/.van-tabs__nav {
      height: 40px !important;
    }
    /deep/.van-tab {
      width: 33.3vw;
    }
    /deep/.van-tabs__line {
      width: 20px;
      background: #559aff;
    }
    /deep/.van-tab--active {
      font-weight: 700;
      color: #2979ff;
    }
  }
  .dataBox {
    padding: 10px;
    padding-top: 136px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .data {
      width: 169px;
      background-color: #fff;
      border-radius: 10px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      flex-direction: column;
      .imgBox {
        position: relative;
        margin-top: 20px;
        font-size: 12px;
        img {
          height: 45px;
          width: 45px;
        }
        div {
          width: 41px;
          line-height: 15px;
          background-color: #494948;
          border-radius: 7px;
          color: #f4cf94;
          text-align: center;
          position: absolute;
          bottom: 3px;
          left: 2px;
        }
      }
      .name {
        font-size: 14px;
        margin-top: 5px;
        width: 80%;
        text-align: center;
      }
      .top {
        font-size: 17px;
      }
      .top1 {
        color: #e3bb7c;
      }
      .tags {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        width: 100%;
        .tag {
          width: 33.3%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            height: 13px;
            width: 13px;
            background-color: rgba(71, 110, 203, 0.2);
            padding: 8px;
            border-radius: 50%;
            color: #476ecb;
            margin-bottom: 4px;
          }
        }
      }
      .follow {
        margin-top: 10px;
        width: 100%;
        background-color: #ff822e;
        color: #fff;
        text-align: center;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        font-size: 15px;
        line-height: 40px;
      }
    }
  }
}
</style>
